{% extends 'base.html' %}
{% load static %}

{% block title %}Appointment Calendar{% endblock %}

{% block extra_css %}
<link href='https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.css' rel='stylesheet' />
<link href='https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.0.0/css/all.min.css' rel='stylesheet'>
<style>
    :root {
        --primary-color: #4361ee;
        --secondary-color: #3f37c9;
        --success-color: #4bb543;
        --danger-color: #ff3333;
        --warning-color: #ffc107;
        --light-color: #f8f9ff;
        --dark-color: #212529;
        --border-radius: 0.5rem;
        --box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.05);
        --transition: all 0.3s ease;
    }

    .page-header {
        background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
        padding: 2rem 0;
        margin-bottom: 2rem;
        color: white;
        border-radius: var(--border-radius);
        box-shadow: var(--box-shadow);
    }

    .page-title {
        font-weight: 700;
        margin: 0;
        font-size: 1.75rem;
    }

    .calendar-container {
        background: #fff;
        border-radius: var(--border-radius);
        box-shadow: var(--box-shadow);
        padding: 1.5rem;
        margin-bottom: 2rem;
        border: 1px solid rgba(0, 0, 0, 0.05);
    }

    .filter-card {
        margin-bottom: 2rem;
        border: none;
        border-radius: var(--border-radius);
        box-shadow: var(--box-shadow);
        border: 1px solid rgba(0, 0, 0, 0.05);
        transition: var(--transition);
    }

    .filter-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.08);
    }

    .filter-card .card-header {
        background: linear-gradient(135deg, #f8f9ff, #e9ecef);
        border: none;
        font-weight: 600;
        padding: 1rem 1.5rem;
        border-radius: var(--border-radius) var(--border-radius) 0 0 !important;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        font-size: 0.85rem;
    }

    .card-body {
        padding: 1.5rem;
    }

    .form-label {
        font-weight: 600;
        color: var(--dark-color);
        margin-bottom: 0.5rem;
        font-size: 0.9rem;
    }

    .form-select, .form-control {
        border: 1px solid #e0e0e0;
        border-radius: 0.375rem;
        padding: 0.6rem 1rem;
        font-size: 0.9rem;
        transition: var(--transition);
    }

    .form-select:focus, .form-control:focus {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 0.2rem rgba(67, 97, 238, 0.15);
    }

    .btn {
        font-weight: 500;
        padding: 0.6rem 1.25rem;
        border-radius: 0.375rem;
        transition: var(--transition);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .btn i {
        margin-right: 0.5rem;
    }

    .btn-primary {
        background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
        border: none;
    }

    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(67, 97, 238, 0.3);
    }

    .btn-outline-secondary {
        border: 1px solid #dee2e6;
    }

    .btn-outline-secondary:hover {
        background-color: #f8f9fa;
        border-color: #dee2e6;
    }

    /* Calendar Customization */
    #calendar {
        background: #fff;
        border-radius: var(--border-radius);
        padding: 1.5rem;
        border: 1px solid rgba(0, 0, 0, 0.05);
    }

    .fc {
        --fc-border-color: #f0f0f0;
        --fc-page-bg-color: #fff;
        --fc-now-indicator-color: var(--danger-color);
        --fc-today-bg-color: rgba(67, 97, 238, 0.08);
        --fc-button-bg-color: #f8f9ff;
        --fc-button-border-color: #e0e0e0;
        --fc-button-text-color: var(--dark-color);
        --fc-button-hover-bg-color: #e9ecef;
        --fc-button-hover-border-color: #d1d7e0;
        --fc-button-active-bg-color: var(--primary-color);
        --fc-button-active-border-color: var(--primary-color);
    }

    .fc-toolbar-title {
        font-weight: 700;
        color: var(--dark-color);
    }

    .fc-button {
        border-radius: 0.375rem !important;
        padding: 0.4rem 0.8rem !important;
        font-size: 0.9rem !important;
        text-transform: capitalize !important;
        box-shadow: none !important;
        transition: var(--transition) !important;
    }

    .fc-button-active {
        background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)) !important;
        border-color: transparent !important;
    }

    .fc-event {
        border-radius: 0.25rem !important;
        border: none !important;
        padding: 0.25rem 0.5rem !important;
        font-size: 0.8rem !important;
        font-weight: 500 !important;
        cursor: pointer !important;
        transition: var(--transition) !important;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
    }

    .fc-event:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
    }

    .fc-day-today {
        background-color: rgba(67, 97, 238, 0.05) !important;
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
        .fc-toolbar {
            flex-direction: column;
            gap: 1rem;
        }
        
        .fc-toolbar-title {
            font-size: 1.25rem;
        }
        
        .btn {
            padding: 0.5rem 1rem;
            font-size: 0.85rem;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid py-4">
    <!-- Page Header -->
    <div class="page-header mb-4">
        <div class="container d-flex justify-content-between align-items-center">
            <div>
                <h1 class="page-title">Appointment Calendar</h1>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0">
                        <li class="breadcrumb-item"><a href="{% url 'home' %}" class="text-white">Home</a></li>
                        <li class="breadcrumb-item active text-white-50" aria-current="page">Calendar</li>
                    </ol>
                </nav>
            </div>
            <div>
                <a href="{% url 'appointments:appointment-create' %}" class="btn btn-light text-primary">
                    <i class="fas fa-plus me-2"></i>New Appointment
                </a>
            </div>
        </div>
    </div>

    <!-- Filters -->
    <div class="card filter-card">
        <div class="card-header">
            <i class="fas fa-sliders-h me-2"></i>Filter Appointments
        </div>
        <div class="card-body">
            <form method="get" class="row g-4">
                <div class="col-lg-4 col-md-6">
                    <label for="staff" class="form-label">
                        <i class="fas fa-user-tie me-2 text-primary"></i>Staff Member
                    </label>
                    <select name="staff" id="staff" class="form-select">
                        <option value="">All Staff Members</option>
                        {% for staff in all_staff %}
                            <option value="{{ staff.id }}" 
                                {% if selected_staff == staff.id %}selected{% endif %}>
                                {{ staff.user.get_full_name|default:staff.user.username }}
                            </option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-lg-4 col-md-6">
                    <label for="service" class="form-label">
                        <i class="fas fa-concierge-bell me-2 text-primary"></i>Service
                    </label>
                    <select name="service" id="service" class="form-select">
                        <option value="">All Services</option>
                        {% for service in all_services %}
                            <option value="{{ service.id }}" 
                                {% if selected_service == service.id %}selected{% endif %}>
                                {{ service.name }} ({{ service.duration }} min)
                            </option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-lg-4 d-flex align-items-end">
                    <div class="d-flex w-100">
                        <button type="submit" class="btn btn-primary flex-grow-1 me-2">
                            <i class="fas fa-filter me-2"></i> Apply Filters
                        </button>
                        <a href="{% url 'appointments:calendar-view' %}" class="btn btn-outline-secondary">
                            <i class="fas fa-sync-alt"></i>
                        </a>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Calendar -->
    <div class="calendar-container mt-4">
        <div id="calendar"></div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src='https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.js'></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const calendarEl = document.getElementById('calendar');
    
    // Build the events URL with filters
    let eventsUrl = '{% url "appointments:api-appointment-list" %}';
    const urlParams = new URLSearchParams(window.location.search);
    const staffId = urlParams.get('staff');
    const serviceId = urlParams.get('service');
    
    if (staffId) eventsUrl += `?staff=${staffId}`;
    if (serviceId) eventsUrl += `${staffId ? '&' : '?'}service=${serviceId}`;

    // Initialize the calendar
    const calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'dayGridMonth',
        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay'
        },
        events: eventsUrl,
        eventClick: function(info) {
            // Open the appointment detail page when an event is clicked
            window.location.href = info.event.url;
        },
        eventTimeFormat: { // Custom time format
            hour: '2-digit',
            minute: '2-digit',
            hour12: true
        },
        eventClassNames: function(arg) {
            // Add custom classes based on appointment status
            const status = arg.event.extendedProps.status;
            const classes = [];
            if (status === 'confirmed') classes.push('fc-event-success');
            if (status === 'cancelled') classes.push('fc-event-danger');
            if (status === 'completed') classes.push('fc-event-secondary');
            return classes;
        }
    });

    calendar.render();

    // Add event listener for filter changes
    document.getElementById('staff').addEventListener('change', function() {
        this.form.submit();
    });
    document.getElementById('service').addEventListener('change', function() {
        this.form.submit();
    });
});
</script>

<style>
/* Custom event colors based on status */
.fc-event-success {
    background-color: #198754 !important;
    border-color: #198754 !important;
}
.fc-event-danger {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
}
.fc-event-secondary {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
}
/* Improve event appearance */
.fc-event {
    cursor: pointer;
    padding: 2px 5px;
    margin-bottom: 2px;
    border-radius: 3px;
    font-size: 0.85em;
}
</style>
{% endblock %}